define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  // var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  var animation = require('hy5b/animation/index')

  const pi = Math.PI

  var graphUtil = require("hy5b/graph/index")


  var littleCanvas = require('hy5b/frontend/canvas/littleCanvas')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var lc = new littleCanvas().setSize(800, 600)
    var elem = lc.pop()
    $app.append($(elem).css('background-color', '#2d3e53'));

    var T = 5000;

    var animate = new animation({
      props: {
        radius: {
          start: 0,
          end: 60,
          duration: T
        },
        opacity: {
          start: 1,
          end: 0,
          delay: T / 2,
          duration: T / 2
        }
      },

    })

    var t = 0;
    var count = 5;
    var betweenTime = T / count;
    function step() {
      requestAnimationFrame(step)

      lc.clear();

      var props;
      for (var i = 0; i < count; i++) {
        props = animate.getStaticFrame((t + betweenTime * i) % T);
        drawAgent(props);
      }

      t += animation.FRAME60;
      if (t > 120000) {
        t -= 60000;
      }
    }

    function drawAgent(props) {
      ripple(lc, props.radius.now, props.opacity.now);
    }

    step()

  }

  function ripple(lc, radius, opacity) {

    lc.draw(function(ctx) {
      ctx.arc(this.width / 2, this.height / 2, radius, 0, pi * 2)
      // ctx.strokeStyle = 'rgba(171, 189, 255, 1.0)';
      var color = [49, 54, 149]
      var r = Math.min((color[0] + 255) / 2 + 20, 255)
      var g = Math.min((color[1] + 255) / 2 + 30, 255)
      var b = Math.min((color[2] + 255) / 2 + 50, 255)
      // console.log(r, g, b)
      ctx.strokeStyle = graphUtil.joinRgb([r, g, b], opacity)
      ctx.lineWidth = 1;
      ctx.shadowColor = graphUtil.joinRgb(color, opacity);
      ctx.shadowBlur = 2;
      ctx.stroke();
    })
  }

  return main;
})
